// 注入到订单页面的调试器脚本
(function() {
    console.log('===== 订单页面调试器已加载 =====');
    
    // 等待DOM加载完成
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startDebugging);
    } else {
        startDebugging();
    }
    
    function startDebugging() {
        console.log('DOM已加载完成，开始调试...');
        
        // 1. 检查订单页面是否已加载
        const orderContainer = document.querySelector('.container.orders');
        if (!orderContainer) {
            console.error('未找到订单页面容器元素，请确保在订单页面执行此脚本');
            return;
        }
        
        console.log('找到订单页面容器:', orderContainer);
        
        // 2. 创建调试面板
        createDebugPanel();
        
        // 3. 定期检查Vue实例
        let checkInterval = setInterval(() => {
            console.log('正在尝试查找Vue实例...');
            const vm = findVueInstance(orderContainer);
            if (vm) {
                clearInterval(checkInterval);
                console.log('找到Vue实例:', vm);
                analyzeVueInstance(vm);
                
                // 4. 监控数据变化
                monitorDataChanges(vm);
                
                // 5. 检查模板渲染
                checkTemplateRendering(vm);
            }
        }, 1000);
        
        // 5秒后停止检查
        setTimeout(() => {
            clearInterval(checkInterval);
            console.log('未能自动找到Vue实例，请手动使用findVueInstance()函数查找');
        }, 5000);
    }
    
    // 创建调试面板
    function createDebugPanel() {
        console.log('创建调试面板...');
        
        // 检查是否已存在调试面板
        if (document.getElementById('order-debug-panel')) {
            console.log('调试面板已存在，跳过创建');
            return;
        }
        
        const panel = document.createElement('div');
        panel.id = 'order-debug-panel';
        panel.style = `
            position: fixed;
            top: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.9);
            color: white;
            padding: 20px;
            border-radius: 8px;
            z-index: 9999;
            max-width: 400px;
            max-height: 600px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        `;
        
        panel.innerHTML = `
            <h3 style="margin-top: 0;">订单页面调试器</h3>
            <div id="debug-info" style="margin-bottom: 10px;">正在初始化...</div>
            <button id="refresh-debug" style="margin-top: 10px; padding: 5px 10px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer;">刷新调试信息</button>
        `;
        
        document.body.appendChild(panel);
        
        // 添加刷新按钮事件
        document.getElementById('refresh-debug').addEventListener('click', () => {
            const vm = findVueInstance(document.querySelector('.container.orders'));
            if (vm) {
                analyzeVueInstance(vm);
            }
        });
        
        console.log('调试面板创建完成');
    }
    
    // 更新调试面板信息
    function updateDebugPanel(info) {
        const panel = document.getElementById('debug-info');
        if (panel) {
            panel.innerHTML = info;
        }
        console.log(info);
    }
    
    // 查找Vue实例
    function findVueInstance(element) {
        console.log('尝试查找Vue实例...');
        
        // 检查元素的Vue相关属性
        for (let prop in element) {
            if (prop.startsWith('__vue') || prop.includes('vue')) {
                console.log('找到Vue相关属性:', prop);
                return element[prop];
            }
        }
        
        // 检查window对象
        if (window.$vm) {
            console.log('找到window.$vm');
            return window.$vm;
        }
        
        if (window.app) {
            console.log('找到window.app');
            return window.app;
        }
        
        // 检查Vue 3的vnode属性
        if (element._vnode) {
            console.log('找到_vnode属性');
            if (element._vnode.component) {
                console.log('找到组件实例');
                return element._vnode.component;
            }
        }
        
        console.log('未找到Vue实例');
        return null;
    }
    
    // 分析Vue实例
    function analyzeVueInstance(vm) {
        console.log('===== 分析Vue实例开始 =====');
        
        // 检查关键属性
        const hasOrders = vm.orders && Array.isArray(vm.orders);
        const hasFilteredOrders = vm.filteredOrders && Array.isArray(vm.filteredOrders);
        
        let debugInfo = `
            <div><strong>Vue实例信息:</strong></div>
            <div>• orders数组: ${hasOrders ? `${vm.orders.length}个元素` : '未定义或不是数组'}</div>
            <div>• filteredOrders数组: ${hasFilteredOrders ? `${vm.filteredOrders.length}个元素` : '未定义或不是数组'}</div>
            <div>• 当前标签: ${vm.activeTab || '未定义'}</div>
            <div>• 加载状态: ${vm.loading ? '加载中' : '已完成'}</div>
            <div>• 错误信息: ${vm.error || '无'}</div>
        `;
        
        // 如果有订单数据，显示详细信息
        if (hasOrders && vm.orders.length > 0) {
            const orderSample = vm.orders[0];
            debugInfo += `
                <div style="margin-top: 10px;"><strong>订单数据样本:</strong></div>
                <div>• ID: ${orderSample.id}</div>
                <div>• 状态: ${orderSample.status}</div>
                <div>• 订单号: ${orderSample.orderNo || '无'}</div>
                <div>• 商品数量: ${orderSample.items ? orderSample.items.length : 0}</div>
            `;
            
            // 记录订单状态分布
            const statusStats = vm.orders.reduce((acc, order) => {
                acc[order.status] = (acc[order.status] || 0) + 1;
                return acc;
            }, {});
            console.log('订单状态分布:', statusStats);
            debugInfo += `<div style="margin-top: 5px;">• 状态分布: ${JSON.stringify(statusStats)}</div>`;
        }
        
        // 如果有过滤后的订单，显示详细信息
        if (hasFilteredOrders && vm.filteredOrders.length > 0) {
            const filteredSample = vm.filteredOrders[0];
            debugInfo += `
                <div style="margin-top: 10px;"><strong>过滤后订单样本:</strong></div>
                <div>• ID: ${filteredSample.id}</div>
                <div>• 状态: ${filteredSample.status}</div>
                <div>• 订单号: ${filteredSample.orderNo || '无'}</div>
            `;
        }
        
        updateDebugPanel(debugInfo);
        
        console.log('===== 分析Vue实例结束 =====');
        
        // 将vm对象暴露到全局，以便手动调试
        window.orderVm = vm;
        console.log('Vue实例已暴露到window.orderVm，可以在控制台直接访问');
    }
    
    // 监控数据变化
    function monitorDataChanges(vm) {
        console.log('开始监控数据变化...');
        
        // 定期检查数据变化
        let lastOrdersLength = vm.orders ? vm.orders.length : -1;
        let lastFilteredOrdersLength = vm.filteredOrders ? vm.filteredOrders.length : -1;
        
        setInterval(() => {
            const currentOrdersLength = vm.orders ? vm.orders.length : -1;
            const currentFilteredOrdersLength = vm.filteredOrders ? vm.filteredOrders.length : -1;
            
            if (currentOrdersLength !== lastOrdersLength) {
                console.log(`📊 orders数量变化: ${lastOrdersLength} -> ${currentOrdersLength}`);
                lastOrdersLength = currentOrdersLength;
            }
            
            if (currentFilteredOrdersLength !== lastFilteredOrdersLength) {
                console.log(`🔍 filteredOrders数量变化: ${lastFilteredOrdersLength} -> ${currentFilteredOrdersLength}`);
                lastFilteredOrdersLength = currentFilteredOrdersLength;
            }
            
            // 检查activeTab变化
            if (window.lastActiveTab !== vm.activeTab) {
                console.log(`🔄 标签切换: ${window.lastActiveTab || '初始'} -> ${vm.activeTab}`);
                window.lastActiveTab = vm.activeTab;
            }
        }, 2000);
        
        console.log('数据变化监控已启动');
    }
    
    // 检查模板渲染
    function checkTemplateRendering(vm) {
        console.log('===== 检查模板渲染开始 =====');
        
        // 检查订单列表和空状态元素
        const orderList = document.querySelector('.order-list');
        const emptyOrders = document.querySelector('.empty-orders');
        
        console.log('订单列表元素:', orderList);
        console.log('空状态元素:', emptyOrders);
        
        // 检查订单列表是否应该显示但未显示
        if (vm.filteredOrders && vm.filteredOrders.length > 0) {
            if (!orderList || orderList.offsetParent === null) {
                console.error('⚠️ 严重问题：filteredOrders有数据，但订单列表元素不可见');
                console.log('filteredOrders长度:', vm.filteredOrders.length);
                console.log('订单列表元素样式:', orderList ? getComputedStyle(orderList) : '不存在');
            } else {
                console.log('✅ 订单列表元素可见，包含', orderList.children.length, '个子元素');
            }
        } else {
            if (!emptyOrders || emptyOrders.offsetParent === null) {
                console.error('⚠️ 问题：filteredOrders为空，但空状态元素不可见');
            } else {
                console.log('✅ 空状态元素可见');
            }
        }
        
        // 检查调试信息是否可见
        const debugInfoElement = document.querySelector('.debug-info');
        if (debugInfoElement) {
            console.log('调试信息元素:', debugInfoElement);
            
            // 尝试自动展开调试信息
            const summary = debugInfoElement.querySelector('summary');
            if (summary) {
                summary.click();
                console.log('已尝试展开调试信息');
            }
        }
        
        console.log('===== 检查模板渲染结束 =====');
    }
    
    // 暴露有用的函数到全局，方便手动调试
    window.findVueInstance = findVueInstance;
    window.analyzeVueInstance = analyzeVueInstance;
    window.checkTemplateRendering = checkTemplateRendering;
    
    console.log('===== 调试器初始化完成 =====');
    console.log('可用的全局调试函数:');
    console.log('• findVueInstance(element) - 查找Vue实例');
    console.log('• analyzeVueInstance(vm) - 分析Vue实例');
    console.log('• checkTemplateRendering(vm) - 检查模板渲染');
})();